<template>
  <div class="lineChart">
    <div class="line-title">
      <p>
        <span class="mr">设备名称</span> {{this.key.nickname}}</p>
      <p>
        <span class="mr">瞬间流量</span> {{this.key.latest_flow}}
        <span class="addDate">{{this.key.latest_measure_time}}</span>
      </p>
    </div>
    <div id="chartBox"></div>
  </div>
</template>
<script>
  // import { drawLine, chart } from "@/utils/echart.js";
  import echarts from 'echarts'
  import { line as lineUrl } from '../../code/api'
  export default {
    data() {
      return {
        key: null,
        option: null
      };
    },
    created() {
      this.key = this.$route.params;
    },
    mounted() {
      console.log(sessionStorage.getItem('user_token'))
      var chart = echarts.init(document.getElementById('chartBox'))
      let params = {
        user_token: sessionStorage.getItem('user_token'),
        flowmeter_nickname: this.key.nickname,
        start_time: this.key.latest_measure_time
      }
      this.$http.post(lineUrl, params).then((res) => {
        console.log(res.data)
        var res = [{ id: 1, measure_time: '2017-10-10', value: 500 }, { id: 5, measure_time: '2017-10-20', value: 60 }, { id: 6, measure_time: '2017-10-06', value: 700 }]
        var arry = []
        var data = res.map(function (item) {
          arry = []
          arry.push(item.measure_time)
          arry.push(item.value)
          return arry
        })
        console.log(data)
        chart.setOption({
          // title: {
          //   text: '动态数据 + 时间坐标轴'
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            },
            show: false
          },
          grid: {
            left: '12%'
          },
          xAxis: {
            type: 'time',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            },
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
              show: false
            }
          },
          series: [{
            // name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
          }]
        })
        // setInterval(function () {

          // that.$http.post(newData, ).then((res) =>{
          //   console.log(res)
          //   data.shift()
          //   var newData = []
          //   newData.push(item.measure_time)
          //   newData.push(item.value)
          //   data.push(newData)
          // chart.setOption({
          //   series: [
          //     {
          //       data: data
          //     }
          //   ]
          // });
          // })
        // }, 2000);
      })
      // 图表点击事件的回调函数
      window.addEventListener('resize', function () {
        chart.resize()
      })

      // chart.on('click', params =>{});


    },
    methods: {}
  };

</script>
<style>
  /* .lineChart{ */
  /* margin: 0 30px; */
  /* } */

  .line-title {
    padding-top: 30px;
    padding-bottom: 20px;
    margin-left: 30px;
    border-bottom: 1px solid #cdcdcd;
  }

  .line-title p {
    line-height: 50px;
    position: relative;
  }

  .line-title .mr {
    color: #cdcdcd;
    margin-right: 20px;
  }

  #chartBox {
    /* margin-left: 30px; */
    width: 95%;
    height: 500px;
    margin: 0 auto;
  }

  #chartBox canvas {
    margin: 0 auto;
  }

  .addDate {
    position: absolute;
    right: 30px;
  }
</style>